<template>
	<view class="record-pages">
		<view class="menu-block">
			<view class="menu-item" @click="handleMenuTab(1)" :class="menuTab==1?'active':''">
				<view class="menu">全部</view>
			</view>
			<view class="menu-item" @click="handleMenuTab(2)" :class="menuTab==2?'active':''">
				<view class="menu">近半年</view>
			</view>
			<view class="menu-item" @click="handleMenuTab(3)" :class="menuTab==3?'active':''">
				<view class="menu">近一年</view>
			</view>
			<view class="menu-item" @click="menuTab=4" :class="menuTab==4?'active':''">
				<view class="iconfont icon-shaixuan" v-if="date=='其他时段'"></view>
				<picker mode="date" :end="endDate" class="menu" @change="changePicker">
					{{date}}
				</picker>
			</view>
		</view>
		<template v-if="list.length>0">
			<view class="info-item" v-for="item in list" :key="item.id">
				<view class="title-item">
					<view class="title">{{item.carNo}}</view>
					<!-- <view class="number">{{item.carNo}}</view> -->
				</view>
				<view class="time-item">
					<view class="time">{{item.clearDate}}</view>
					<view class="price">-￥{{item.transAmount}}</view>
				</view>
			</view>
		</template>
		<view v-if="more==false&&list.length==0" class="empty">暂无数据</view>
		<view v-else-if="more==false&&list.length>0" class="empty">没有更多了</view>
		
		<!-- 手机号验证弹窗 -->
		<PhoneVerifyDialog :show.sync="showPhoneVerify" @success="handleVerifySuccess" />
	</view>
</template>

<script>
	import {
		getCurrentTime
	} from '@/util/util.js'
	import {
		getTravelRecordApi
	} from '@/api/record.js'
	import {
		verifyBindPhoneApi
	} from '@/api/user.js'
	import {
		isMore,
		showToast
	} from '@/util/util.js'
	import PhoneVerifyDialog from '@/components/PhoneVerifyDialog/PhoneVerifyDialog.vue'
	
	export default {
		components: {
			PhoneVerifyDialog
		},
		data() {
			return {
				menuTab: 1,
				date: '其他时段',
				endDate: getCurrentTime('d'),
				list: [],
				conf: {
					pageNum: 1,
					pageSize: 10,
					startDate: '',
					endDate: ''
				},
				more: true,
				showPhoneVerify: false
			}
		},
		methods: {
			// 处理时间转换
			handleDateRange(type, specificDate = '') {
				const now = new Date()
				const endDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59)
				let startDate = new Date()
				
				switch(type) {
					case 2: // 近半年
						startDate = new Date(now.setMonth(now.getMonth() - 6))
						startDate.setHours(0, 0, 0, 0)
						break
					case 3: // 近一年
						startDate = new Date(now.setMonth(now.getMonth() - 12))
						startDate.setHours(0, 0, 0, 0)
						break
					case 4: // 其他时段
						if(specificDate) {
							startDate = new Date(specificDate)
							startDate.setHours(0, 0, 0, 0)
							endDate.setTime(startDate.getTime())
							endDate.setHours(23, 59, 59)
						}
						break
					default: // 全部
						startDate = new Date(0) // 1970年
						break
				}
				
				this.conf.startDate = startDate.getFullYear() + 
					'-' + String(startDate.getMonth() + 1).padStart(2, '0') + 
					'-' + String(startDate.getDate()).padStart(2, '0') + 
					' ' + String(startDate.getHours()).padStart(2, '0') + 
					':' + String(startDate.getMinutes()).padStart(2, '0') + 
					':' + String(startDate.getSeconds()).padStart(2, '0')
					
				this.conf.endDate = endDate.getFullYear() + 
					'-' + String(endDate.getMonth() + 1).padStart(2, '0') + 
					'-' + String(endDate.getDate()).padStart(2, '0') + 
					' ' + String(endDate.getHours()).padStart(2, '0') + 
					':' + String(endDate.getMinutes()).padStart(2, '0') + 
					':' + String(endDate.getSeconds()).padStart(2, '0')
			},
			
			handleMenuTab(tab) {
				this.menuTab = tab
				this.handleDateRange(tab)
				this.handleRefresh()
			},
			
			changePicker(e) {
				this.date = e.detail.value
				this.handleDateRange(4, e.detail.value)
				this.handleRefresh()
			},
			handleRefresh() {
				this.conf.pageNum = 1;
				this.more = true;
				this.getList(true);
			},
			getList(refresh = false) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getTravelRecordApi(this.conf).then(res => {
					
					uni.hideLoading()
					if(res=== 408){
						uni.showModal({
							title: '提示',
							content: '请先绑定手机号后再查看行程记录',
							confirmText: '去绑定',
							success: (res) => {
								if (res.confirm) {
									this.showPhoneVerify = true
								}
							}
						})
					}
					
					let list = res.list || [];
					if (refresh) {
						this.list = list;
					} else {
						this.list = [...this.list, ...list]
					}
					this.more = isMore(this.conf.pageNum, this.conf.pageSize, res.total)
				})
			},
		
			// 处理手机号验证成功
			handleVerifySuccess() {
				// 绑定成功后重新获取列表数据
				setTimeout(() => {
					this.handleRefresh()
				}, 500)
			}
		},
		onReachBottom() {
			if (this.more) {
				this.conf.pageNum++;
				this.getList();
			}
		},
		onLoad() {
			this.handleDateRange(1)
			this.getList(true)
		}
	}
</script>

<style lang="scss" scoped>
	.record-pages {
		padding: 30rpx;

		.menu-block {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.menu-item.active {
				background-color: #3175ff;
				color: #fff;
			}

			.menu-item {
				width: calc((100% - 60rpx) / 4);
				height: 60rpx;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx;
				color: #767676;
				font-size: 24rpx;

				.iconfont {
					font-size: 26rpx;
					margin-right: 6rpx;
				}
			}
		}

		.info-item {
			background-color: #fff;
			margin-top: 30rpx;
			padding: 30rpx;
			border-radius: 20rpx;

			.title-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: bold;
				font-size: 32rpx;
			}

			.time-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30rpx;
				font-size: 28rpx;

				.time {
					color: #767676;
				}

				.price {
					color: #ea0000;
				}
			}
		}
		
		.empty {
			text-align: center;
			color: #999;
			font-size: 28rpx;
			margin-top: 50rpx;
		}
	}
</style>